<template>
    <div class="index">
        <el-row>
            <el-col :span="24">
                <Banner></Banner>
            </el-col>
            <el-col :span="24" style="margin-bottom: 20px;">
                <IndexSongList :menulist="['为您推荐', '华语', '流行', '摇滚', '民谣', '电子']" :title="'热门推荐'"></IndexSongList>
            </el-col>
            <el-col :span="24" style="margin-bottom: 20px;">
                <IndexNewSong :menulist="[{ name: '全部', value: 'ALL' },
                { name: '华语', value: 'ZH' },
                { name: '欧美', value: 'EA' },
                { name: '韩国', value: 'KR' },
                { name: '日本', value: 'JP' }]" :title="'新碟上架'">
                </IndexNewSong>
            </el-col>
            <el-col :span="24" style="margin-bottom: 20px;">
                <IndexTopList></IndexTopList>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import Banner from '@/components/index/banner.vue'
import IndexSongList from '@/components/index/IndexSongList.vue'
import IndexNewSong from '@/components/index/IndexNewSong.vue'
import IndexTopList from '@/components/index/IndexTopList.vue';
</script>

<style lang="less" scoped>
.index {
    height: calc(100vh - 100px);
}
</style>